<template>
    <div class="right-[486px]  px-[20px]">
        <div class="flex gap-[20px]  flex-col">
            <div :class="showverviewalrm == 1 ? 'bg-[#1D3551]' : 'bg-[#1D395B]'"
                class="w-[100%] linejian px-[16px] h-[32px] flex  justify-center items-center">
                <el-checkbox class="!h-[16px] text-[#fff]" v-model="showverviewalrm" label="总览模式" :true-value="1"
                    :false-value="2" @change="viewsChange" />
            </div>
            <div :class="showverviewalrm == 2 ? 'bg-[#1D3551]' : 'bg-[#1D395B]'"
                class="w-[100%] linejian  px-[14px] h-[32px] flex justify-center items-center">
                <el-checkbox class="!h-[16px]  text-[#fff]" v-model="showverviewalrm" label="告警模式" :true-value="2"
                    :false-value="1" @change="viewsChange" />
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { useDataDashboardThemeStoreHook } from '@/store/modules/data-dashboard-theme'
const useDataDashboardThemeStore = useDataDashboardThemeStoreHook()
const showverviewalrm = ref(1)
const channel = ref(null)
onBeforeMount(() => {
    channel.value = new BroadcastChannel('data-dashboard-them')
})
onUnmounted(() => {
    channel.value.close();
})
const viewsChange = (val: number) => {
    useDataDashboardThemeStore.CHANGE_SETTING({ key: 'showverviewalrm', value: val });
    channel.value.postMessage({ key: 'projectId', value: val, type: 'showverviewalrm' });

}
</script>
<style scoped lang="scss">
.linejian {
    background: linear-gradient(to right, rgba(12, 35, 72, 0.1) 10%, rgba(11, 44, 75, 1) 90%, rgba(12, 34, 70, 0) 100%);
}
</style>